<template>
  <div class="fb-button-group">
    <div class="fb-button-item">
      <slot />
    </div>
    <template v-for="(item, index) in list">
      <div v-if="item.auth === undefined || item.auth" :key="index" class="fb-button-item">
        <export-button
          v-if="item.type === 'export'"
          ref="orderExportRef"
          :export-api="item.exportApi"
          :export-name="item.exportName"
          :export-name-last="item.exportNameLast"
          :format="item.format || 'xlsx'"
          :is-before-export="item.isBeforeExport === false? item.isBeforeExport: true"
          :http-method="item.httpMethod || 'get'"
          is-diy
          @onComplate="exportonComplate"
          @onErrorExport="loading = false"
          @beforeExport="beforeExport(item)">
          <span style="padding: 0 10px;cursor:pointer;font-size:14px;"><i v-if="loading && !item.notLoading" class="el-icon-loading"/> {{ item.label }}</span>
        </export-button>
        <ImportButton v-else-if="item.type === 'import'" :extend-params="item.extendParams || {}" :accept="item.accept || '.xls,.xlsx'" :import-api="item.importApi" :get-list="item.callback" :type="item.uploadType || ''" style="padding-top:0;" is-diy>
          <ToolTip v-if="item.tooltip" :content="item.tooltip">
            <span style="padding: 0 10px;font-size:14px;color:#666;">{{ item.label }}</span>
          </ToolTip>
          <span v-else style="padding: 0 10px;font-size:14px;color:#666;">{{ item.label }}</span>
        </ImportButton>
        <span v-else style="padding: 0 10px;cursor:pointer;" @click="item.handelClick()">{{ item.label }}</span>
      </div>
    </template>
  </div>
</template>

<script>
import ExportButton from '@/components/ExportButton';
import ImportButton from '@/components/ImportButton';
import { showModal } from '@/utils/message';

export default {
  components: { ExportButton, ImportButton },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    exportonComplate() {
      this.loading = false;
      this.$emit('onComplate');
    },
    beforeExport(i) {
      if (i.beforeExport) i.beforeExport();
    },
    btnExport(params, message = '是否确定导出数据？') {
      if (!this.loading && this.$refs.orderExportRef) {
        showModal(message, '', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.loading = true;
          this.$refs.orderExportRef[0].btnExport(params);
          this.$emit('beginExport');
        });
      }
    },
    btnExportDirect(params) {
      this.loading = true;
      this.$refs['orderExportRef'][0].btnExport(params);
    }
  }
};
</script>

<style lang="scss" scoped>
.fb-button-group {
  height: 32px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .fb-button-item {
    height: 32px;
    position: relative;
    font-size: 14px;
    color: #666666;
    display: flex;
    align-items: center;
    &::after {
      content: '';
      width: 1px;
      background: #DDDDDD;
      height: 14px;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -7px;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
</style>
